package myJs.statistics

import myJs.MainCp
import myJs.api.Api
import myJs.cps._
import myJs.myPkg.ReactRouterDOM
import myJs.myPkg.bootstrap.jquery.{AffixOptions, Offset, ScrollspyOptions}
import myJs.myPkg.jquery.$
import org.scalajs.dom.{URLSearchParams, document}
import slinky.core.annotations.react
import slinky.core.facade.Hooks._
import slinky.core.{FunctionalComponent, TagElement}
import slinky.web.SyntheticMouseEvent
import slinky.web.html._
import typings.csstype.csstypeStrings
//import myJs.myPkg.i18n.ReactI18next
import myJs.Implicits._

/**
 * Created by yz on 21/1/2022
 */
@react object Cp {

  case class Props(showLoading: Boolean = true)

  val curPage = Statistics

  val component = FunctionalComponent[Props] { props =>

    val location = ReactRouterDOM.useLocation()
    val searchParams = new URLSearchParams(location.search)
    val initDefaultAnchor = searchParams.get("defaultAnchor").null2Empty
    val (defaultAnchor, setDefaultAnchor) = useState(initDefaultAnchor)

    object FTool {

      def scrollExec(anchorName: String) = {
        document.getElementById(anchorName).scrollIntoView()
      }

      def scrollToAnchor(anchorName: String) = (e: SyntheticMouseEvent[TagElement#RefType]) => {
        e.preventDefault()
        scrollExec(anchorName)
      }

    }

    useEffect(() => {
      $("body").scrollspy(ScrollspyOptions(target = "#myScrollspy", offset = 1))
      $("#myNav").affix(AffixOptions(offset = Offset(top = 50)))
    }, List()
    )

    useEffect(() => {
      if(defaultAnchor.nonBlank){
        FTool.scrollExec(defaultAnchor)
      }
    }, List(defaultAnchor)
    )

    val liWidth = 280

    MainCp(title = curPage.titleStr)(

      div(className := "panel panel-default",
        div(className := "panel-heading",
          h3(className := "panel-title",
            s"${curPage.titleStr}"
          )
        ),
        div(className := "panel-body",

          div(style := Style(display = csstypeStrings.flex, maxWidth = 1108),
            div(style := Style(flex = 25, width = "25%"),
              div(id := "myScrollspy",
                div(className := "bs-docs-sidebar affix-top", role := "complementary",
                  ul(style := Style(width = liWidth), className := "nav bs-docs-sidenav", id := "myNav",
                    li(style := Style(width = liWidth), className := "",
                      a(href := s"#1", "Summary of Human Bulk Tissue Samples By Phenotype", onClick := FTool.scrollToAnchor("1"))
                    ),
                    li(style := Style(width = liWidth), className := "",
                      a(href := "#2", "Summary of Mouse Bulk Tissue Samples By Phenotype", onClick := FTool.scrollToAnchor("2"))
                    ),
                    li(style := Style(width = liWidth), className := "",
                      a(href := "#3", "Summary of Human Single Cells By Phenotype ", onClick := FTool.scrollToAnchor("3"))
                    ),
                  )
                ),
              )
            ),
            div(style := Style(flex = 75, paddingLeft = 15,
              position = csstypeStrings.relative, paddingRight = 15), id := "scrollContent",
              h4(style := Style(marginBottom = 15), "Summary of Human Bulk Tissue Samples By Phenotype", id := "1"),
              img(style := Style(height = 664), src := s"${Api.images}/hbulk.png"),
              h4(style := Style(marginBottom = 15, marginTop = 15), "Summary of Mouse Bulk Tissue Samples By Phenotype", id := "2"),
              img(style := Style(height = 614), src := s"${Api.images}/mbulk.png"),
              h4(style := Style(marginBottom = 15, marginTop = 15), "Summary of Human Single Cells By Phenotype", id := "3"),
              img(style := Style(height = 710), src := s"${Api.images}/sc.png"),
            )

          )

        )
      )

    )

  }

  object STool {

    val myBtn = Style(cursor = csstypeStrings.pointer,
      marginBottom = 10, paddingTop = 3, paddingBottom = 3, marginRight = 15
    )

  }

}
